<script setup lang="ts">
import { dynamicRoutes } from '@/router/routes';
import { useLoginStore } from '@/stores/userInfo';
import { Avatar } from '@element-plus/icons-vue';
import { DEFAULT_LOGIN_PATH } from '../../../packages/constants/src';
import { useRouter } from 'vue-router';

const userInfo = useLoginStore()
const router = useRouter()
// 退出登录
const handleLogout = () => {
    ElMessageBox.confirm(
        '是否确定退出系统吗',
        '温馨提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // 模拟删除权限
            userInfo.changeAuthority(false)
            // 移除动态路由
            dynamicRoutes.forEach((item) => {
                // TODO: console ---> Cannot remove non-existent route "/"
                if (item) {
                    router.removeRoute(item.path)
                }
            })
            router.replace(DEFAULT_LOGIN_PATH)
        })
        .catch((err) => {
            console.log('取消退出', err);
        })
}
</script>

<template>
    <el-header class="header_content">
        <div class="external_box">
            <div class="Breadcrumb_box">
                Breadcrumb
            </div>
            <div class="Setting_box">
                <el-dropdown>
                    <!-- TODO: 鼠标移入有黑边 -->
                    <el-avatar :icon="Avatar" style="cursor: pointer;" />
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>个人设置</el-dropdown-item>
                            <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
    </el-header>
</template>

<style lang="scss" scoped>
.header_content {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(255, 255, 255);
    width: 86.5%;
    padding: 0;
    height: 64px; // 默认高度60px
    color: black;

    .external_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0;
        height: 64px;
        box-shadow: 0 3px 6px #00152914;

        .Breadcrumb_box {
            display: flex;
            align-items: center;
        }

        .Setting_box {
            display: flex;
            align-items: center;
            margin-right: 40px;
        }
    }
}
</style>
